<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打水记录</title>
    <style>
        body{
            margin: 0px;
            width: 375px;
            height: 61px;
        }
        #img1{
            width: 375px;
            height: 61px;
        }
        #return{
            width: 21px;
            height: 40px;
        }
        #mine{
            position: absolute;
            top: -6px;
            left: 140px;
            color: white;
            font-family: 方正粗黑宋简体;
        }
        #zhiti{
            position: absolute;
            top: 117px;
            left: 145px;
            font-size: 25px;
            color: white;
            letter-spacing: 25px;
        }
        .news ul {
            padding: 0;
            line-height:3px
        }
        .news li {
            position: relative;
            overflow: hidden;
            padding: 5px;
            border-bottom: 1px solid lightgray;
        }
        .news li span {
            display: none;
        }
        .news li:hover span {
            display: inline;
            position: absolute;
            top: 0;
            right: 2px;
            padding: 0 5px;
            border-radius: 10px;
            font-size: 12px;
            background: #ececec;
        }
        .news .news_content {
            /*width: 60%;*/
            height: 85%;
            margin: 2.5%;
            float: left;
        }
        .news .news_content p {
            line-height: 27px;
            margin-top: 10px;
        }
        #footer{
            margin: 12px;
        }

    </style>
</head>
<body>
<div style="position:relative;height: 61px">
    <img id="img1" src="./img/nearby/img1.png">
    <div style="position:absolute; left:10px; top:8px;">
        <img id="return" src="./img/nearby/return.png" onclick="history.go(-1)" >
    </div>
    <div style="position:absolute; left:330px; top:12px;">
        <a href="add.php"><img  src="./img/add.png"> </a>
<!--        <img id="add" src="./img/add.png" onclick="history.go(-1)" >-->
    </div>
    <div id="mine">
        <h2>打水记录</h2>
    </div>
</div>
<div id="content">
    <div class="news">
        <ul id="news">
        </ul>
    </div>
</div>
<div id="main" style="height:500px;"></div>
<script src="./api/app.js"></script>
<script src="./api/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>

    function paymoney() {
        var id=localStorage.getItem("id");
        $.ajax( {
            url: url+'api/record.php',
            type: 'POST',
            dataType:"json",
            async:false,
            data: {
                id:id,
            },
            success: function (res){
                if(res.code==200){

                    console.log(res)
                    if(res.code==200){
                        var data=res.data
                        var ls = document.getElementById('news')
                        var contents = '';
                        for (var j = 0; j < data.length; j ++) {
                            localStorage.setItem('total',data[j].total)
                        }
                        ls.innerHTML = contents;

                    }

                }


                if(res.code<0){
                    showError(res.message)

                }
                console.log(res)
            },

            error : function (res) {
                console.log(res)
            }
        })
    }
    function paymoney1() {
        var id=localStorage.getItem("id");
        $.ajax( {
            url: url+'api/record1.php',
            type: 'POST',
            dataType:"json",
            async:false,
            data: {
                id:id,
            },
            success: function (res){
                if(res.code==200){

                    console.log(res)
                    if(res.code==200){
                        var data=res.data
                        var ls = document.getElementById('news')
                        var contents = '';
                        for (var j = 0; j < data.length; j ++) {
                            localStorage.setItem('total1',data[j].total1)
                        }
                        ls.innerHTML = contents;

                    }

                }


                if(res.code<0){
                    showError(res.message)

                }
                console.log(res)
            },

            error : function (res) {
                console.log(res)
            }
        })

    }
    function paymoney2() {
        var id=localStorage.getItem("id");
        $.ajax( {
            url: url+'api/record2.php',
            type: 'POST',
            dataType:"json",
            async:false,
            data: {
                id:id,
            },
            success: function (res){
                if(res.code==200){

                    console.log(res)
                    if(res.code==200){
                        var data=res.data
                        var ls = document.getElementById('news')
                        var contents = '';
                        for (var j = 0; j < data.length; j ++) {
                            localStorage.setItem('total2',data[j].total2)
                        }
                        ls.innerHTML = contents;

                    }

                }


                if(res.code<0){
                    showError(res.message)

                }
                console.log(res)
            },

            error : function (res) {
                console.log(res)
            }
        })

    }
    window.onload = function () {
        paymoney();
        paymoney1();
        paymoney2();
        // init();
        if(location.href.indexOf("#reloaded")==-1){
            location.href=location.href+"#reloaded";
            location.reload();
        }
    }

    var total=localStorage.getItem('total')
    var total1=localStorage.getItem('total1')
    var total2=localStorage.getItem('total2')

    var myChart = echarts.init(document.getElementById('main'),'light');

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['零食', '衣服', '饮料']
        },
        series: [
            {
                name: '谁TM买衣服啊',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: total, name: '零食'},
                    {value: total2, name: '衣服'},
                    {value: total1, name: '饮料'},
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>